<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>用户信息</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .person-head-area{
            padding: 0.7rem 0 0 0;
            width: 100%;
            height: auto;
        }
        .person-info-box{
            color: #666;
            text-align: center;
            height: auto;
            width: 85%;
            margin: auto;
            position: relative;
        }
        .person-img-area{
            display: block;
            border: none;
            border-radius: 100%;
            width: 1.5rem;
            height: 1.5rem;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .person-img{
            width: 100%;
            height: 100%;
        }
        .person-name{
            padding-top: 0.2rem;
            font-size: 0.28rem;
        }
        .person-level{ font-size: 0.28rem;padding-top: 0.1rem;}
        .show-hire-area{
            width: 100%;
            height: 1.4rem;
            padding: 0.1rem 0;
            font-size: 0.28rem;
            color: #666;
        }
        .hire-area{
            width: 100%;
            display: inline-block;
            height: auto;
            margin-top: 0.2rem;
        }
        .hire-area li{
            box-sizing: border-box;
            float: left;
            text-align: center;
            width: 23%;
            font-size: 0.28rem;
            height: 0.6rem;
            border-radius: 0.1rem;
            border: 1px solid #666;
            margin: 0 1%;
            line-height: 0.6rem;
        }
        .selected{background-color: #F23A38;color: white;border: none !important;}
        .rule-area{
            width: 94%;margin: auto;
            height: auto;
        }
        .rule-title{
            line-height: 0.9rem;
            font-size: 0.28rem;color: #666;
        }

        .rule-area p{
            text-indent: 0.3rem;
            line-height: 0.5rem;font-size: 0.28rem;color: #666;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>用户信息</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="person-head-area">
        <div class="person-info-box">
            <button onclick="setInfo()" class="person-img-area">
                <img class="person-img" src="../../img/logo.png">
            </button>
            <ul>
                <li class="person-name">关小龙</li>
                <li class="person-level">
                    <span>lv.2</span>
                </li>
            </ul>
            <div class="show-hire-area">
                <span>雇佣率</span>
                <ul class="hire-area">
                    <li>低</li>
                    <li>中</li>
                    <li>高</li>
                    <li class="selected">极高</li>
                </ul>
            </div>

        </div>
    </div>
    <div class="rule-area">
        <span class="rule-title">规则说明</span>
        <p>
            1.雇佣率指的是用户雇佣并付款订单在所有已发布的订单中的比例
        </p>
        <p>
            2.雇佣率的级别判断是根据用户近一个月内的订单数据
        </p>
    </div>
</div>
</body>
</html>